<template>
	<div class="friendly-link">
		<panel :title_key="title_key">
			<ul class="friendly-link_content" slot="content">
				<li v-for="item in content" :key="item.id">
					<a :href="item.url" target="_blank">
						<iv-avatar class="friendly-link_content-left" :src="item.avatar || v_system_image" shape="square"></iv-avatar>
						<div class="friendly-link_content-right">
							<p class="friendly-link_content-right_title">{{ item.title }}</p>
							<p class="friendly-link_content-right_link">{{ item.url | textLineBreak(40) }}</p>
						</div>
					</a>
				</li>
			</ul>
		</panel>
	</div>
</template>

<script>
import Panel from '@/components/panel';
export default {
	components: { Panel },
	data() {
		return {
			title_key: 'friendly_link',
			content: []
		};
	},
	created() {
		this.initData()
	},
	methods: {
		initData() {
			this.$api.friendly_link.getHome().then(res => {
				this.content = res.data
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.friendly-link {
	&_content {
		padding: 5px 20px;
		li {
			a {
				display: inline-flex;
				transform: translate(0, 0);
				transition: all 0.2s ease-in;
				&:hover {
					transform: translate(30px, 0);
					transition: all 0.2s ease-in-out;
					.friendly-link_content-right {
						&_title {
							color: $default-title-hover-color;
						}
						&_link {
							color: $default-link-color;
						}
					}
				}
			}
		}
		&-left {
			flex: 0 0 50px;
			width: 50px;
			height: 50px;
			margin: 5px 0;
		}
		&-right {
			display: inline-flex;
			flex-direction: column;
			padding-left: 12px;
			height: 60px;
			line-height: 60px;
			p {
				flex: 1;
				text-align: left;
			}
			&_title {
				height: 35px;
				line-height: 35px;
				font-size: 17px;
				color: $default-title-color;
			}
			&_link {
				height: 15px;
				line-height: 15px;
				font-weight: 100;
			}
		}
	}
}
</style>
